
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登入</title>
    <link rel="stylesheet" href="" th:href="@{/lib/layui/css/layui.css}">
    <link rel="stylesheet" href="" th:href="@{/lib/lo_gin/css/styles.css}">

    <!--<link rel="stylesheet" href="" th:href="@{/lib/js/index.js}">-->
    <!--<link rel="stylesheet" href="" th:href="@{/lib/css/style.css}">-->
    <!--    <style>-->
    <!--        html, body {-->
    <!--            height: 100%;-->
    <!--        }-->
    <!--        #all{-->
    <!--            /*width: 800px;*/-->
    <!--            /*height: 450px;*/-->
    <!--            /*border: 1px solid green;*/-->
    <!--            /*position:absolute;*/-->
    <!--            /*top:50%;*/-->
    <!--            /*left:50%;*/-->
    <!--            /*margin:-225px 0 0 -400px;*/-->

    <!--            height: 90%;-->
    <!--            display: flex;-->
    <!--            align-items: center;-->
    <!--            justify-content: center;-->
    <!--        }-->
    <!--    </style>-->
</head>
<body>
<div class="htmleaf-container">
    <div class="wrapper">
        <div class="container">
            <h1>Welcome</h1>
    <form class="form" action="">

                <input type="text" name="username" required  lay-verify="required" placeholder="Please enter username" autocomplete="off" >

                <input type="password" name="password" required  lay-verify="required" placeholder="Please enter password" autocomplete="off" >

                <input type="button" class="layui-btn" value="Login" id="sub">

    </form>
            <ul class="bg-bubbles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#000000">
<h1>L O V E B L O G</h1>
</div>

<script type="text/javascript" th:src="@{/lib/layui/layui.js}"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>

<script>
    //Demo
    layui.use(['layer','jquery','form'], function(){
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;


        //监听提交
        $('#sub').click(function () {
            var obj = {
                username:$('input[name=username]').val().trim(),
                password:$('input[name=password]').val().trim(),
            }
            var username = $('input[name=username]').val().trim()
            var password = $('input[name=password]').val().trim()
            if(username == ''){
                layer.msg('<a style="color:red">用户名不能为空</a>',{
                    icon:5,//成功图标
                    time:1000
                });
                return;
            }
            if(password == ''){
                layer.msg('<a style="color:red">密码不能为空</a>',{
                    icon:5,//成功图标
                    time:1000
                });
                return;
            }
            $.ajax({
                url:'/login',
                type:'POST',
                // contentType:'application/json',
                datatype:'text',
                data:obj,
                success: function (data) {
                    if(data.status == 4000){
                        var msg = data.msg;
                        layer.msg('<a style="color:red">'+data.msg+'</a>',{
                            icon:5,//失败图标
                            time:1000
                        });

                    }else{
                        window.location.href='login/main'
                    }

                    // if(data.status == 4000){
                    //     layer.msg(data.msg);
                    // }else if(data.status == 2000){
                    //     window.location.href='login/main'
                    // }
                }
            })
        });
    });

</script>
</body>
</html>